<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form" lay-filter="shippingAddress-form">
    <div class="layui-form-item layui-form-text" style="display: none">
        <label class="layui-form-label required">id</label>
        <div class="layui-input-block">
            <input type="text" name="id" lay-verify="required" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label required">收货人</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" placeholder="请输入街道信息" value=""
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label required">手机号</label>
        <div class="layui-input-block">
            <input type="text" name="phoneNum" lay-verify="required" placeholder="请输入街道信息" value=""
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" id="area-picker">
        <div class="layui-form-label required">收货地址</div>
        <div class="layui-input-inline" style="width: 200px;">
            <select name="province" class="province-selector" data-value="" lay-verify="required"
                    lay-filter="province-1">
                <option value="">请选择省</option>
            </select>
        </div>
        <div class="layui-input-inline" style="width: 200px;">
            <select name="city" class="city-selector" lay-verify="required" data-value="" lay-filter="city-1">
                <option value="">请选择市</option>
            </select>
        </div>
        <div class="layui-input-inline" style="width: 200px;">
            <select name="county" class="county-selector" lay-verify="required" data-value="" lay-filter="county-1">
                <option value="">请选择区</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label required">街道</label>
        <div class="layui-input-block">
            <input type="text" name="streetVillage" lay-verify="required" placeholder="请输入街道信息" value=""
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label required">详细地址</label>
        <div class="layui-input-block">
            <textarea name="address" class="layui-textarea" lay-verify="required" placeholder="请填写详细地址"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">提交</button>
        </div>
    </div>
</div>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../../lib/common/common.js" charset="utf-8"></script>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="../../js/lay-module/xm-select-master/dist/xm-select.js" charset="utf-8"></script>
<script>

    let recordId;// 订单记录id

    window.onload = function () {
        recordId = GetQueryString("recordId");

        if (isNotNull(recordId)) {
            init(recordId);
        } else {
            layer.msg('数据异常，请重试');
            setTimeout(function () {
                let iframeIndex = parent.layer.getFrameIndex(window.name);
                parent.layer.close(iframeIndex);
            }, 1500);
        }
    }

    /**
     * 初始化数据
     */
    function init(recordId) {
        $.ajax({
            type: "get",
            url: '/buying/get/' + recordId,
            dataType: 'json',
            contentType: 'application/x-www-form-urlencoded',
            success: function (req) {
                if (req.code === '200') {
                    // if (req.data.orderStatus !== '已付款') {
                    //     layer.msg('该笔订单已发货，不可更改');
                    //     setTimeout(function () {
                    //         let iframeIndex = parent.layer.getFrameIndex(window.name);
                    //         parent.layer.close(iframeIndex);
                    //     }, 1500);
                    //     return;
                    // }
                    let address = JSON.parse(req.data.address)
                    let Region = address.Region;
                    let regionList = [];
                    if (isNotNull(Region)) {
                        regionList = Region.split("-")
                    }
                    layui.use(['form', 'layarea'], function () {
                        let form = layui.form,
                            layarea = layui.layarea;

                        // 初始化省市信息
                        if (regionList.length === 3) {
                            layarea.render({
                                elem: '#area-picker',
                                data: {
                                    province: regionList[0],
                                    city: regionList[1],
                                    county: regionList[2],
                                }
                            });
                        } else {
                            layarea.render({
                                elem: '#area-picker',
                            });
                        }
                        // 初始化表单信息
                        form.val('shippingAddress-form', {
                            "streetVillage": address.StreetVillage,
                            "address": address.Address,
                            "name": address.Name,
                            "phoneNum": address.PhoneNum,
                            "id": req.data.id,
                        });

                    })
                } else {
                    layer.msg(req.msg);
                    setTimeout(function () {
                        let iframeIndex = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(iframeIndex);
                    }, 1500);
                }

            },
            error: function (e) {
                layer.msg("数据有误");
                setTimeout(function () {
                    let iframeIndex = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(iframeIndex);
                }, 1500);
            }
        })
    }

    layui.use(['layer', 'form'], function () {
        var form = layui.form,
            $ = layui.$;

        // 监听提交
        form.on('submit(saveBtn)', function (data) {
            const request = {
                id: data.field.id,
                region: data.field.province + "-" + data.field.city + "-" + data.field.county,
                streetVillage: data.field.streetVillage,
                address: data.field.address,
                name: data.field.name,
                phoneNum: data.field.phoneNum,
            }
            var index = layer.alert("确定提交吗？", {
                title: '提示'
            }, function () {
                let myMsg = layer.msg("正在提交...", {
                    icon: 16,
                    time: -1
                })
                $.ajax({
                    type: "POST",
                    url: '/trade/order/change/address',
                    data: JSON.stringify(request),
                    dataType: 'json',
                    contentType: 'application/json; charset=UTF-8',
                    success: function (req) {
                        if (req.code === '200') {
                            layer.msg(req.msg);
                            layer.close(index);
                            // 关闭弹出层
                            setTimeout(function () {
                                layer.close(myMsg);//手动关闭
                                let iframeIndex = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(iframeIndex);
                                // 调用父页面的方法
                                let parentWindow = window.parent;
                                parentWindow.reloadTable();
                            }, 1500);
                        } else {
                            layer.msg(req.msg);
                        }
                    },
                    error: function (e) {
                        layer.msg(e.msg);
                        layer.close(myMsg);//手动关闭
                    }
                })

            });
            return false;
        });

    });

</script>

</body>
</html>